<template>
<!-- 办公用品 -->
   <div class="workthing">
    <!-- 头部 -->
     <div class="workthing_hend" >
      <el-button class="workthing_hend_bnt" type="primary" plain @click="sing(1)">查看审核</el-button>
      <el-button class="workthing_hend_bnt" type="success" plain  @click="sing(2)">申请办公用品</el-button>
     </div>
     <div class="workthing_nva">
      <!-- 查看审核 -->
         <div class="workthingOne"  v-show="sin==1" >
          <ul class="workthing_bnt">
            <li>
               <el-select v-model="value" clearable placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label"  :value="item.value"></el-option>
              </el-select>
              
            </li>
             <li>
              <el-button type="warning" plain @click="scre">筛选</el-button>
             </li>
          </ul>
            <el-table :data="work" height="250" border style="width: 100%,position: relative;">
                <el-table-column prop="UserName" label="员工姓名"  min-width></el-table-column>
                <el-table-column prop="ThingName"  label="用品名称" min-width></el-table-column>
                <el-table-column prop="ThingSum" label="数量" min-width> </el-table-column> 
                <el-table-column  prop="SQreason" label="申请理由"  min-width> </el-table-column>
                <el-table-column  prop="OAreason" label="审批理由"  min-width> </el-table-column>
                <el-table-column  prop="Checker" label="审批人"  min-width> </el-table-column>
                 <el-table-column prop="OFStatus" label="审批状态" min-width></el-table-column>
                <el-table-column  label="操作" width="100">
                  <template slot-scope="scope">
                     <el-button  @click="keys1(scope.row)"  type="text" size="small">详情</el-button>
                 </template>
                </el-table-column> 
            </el-table>
             <p :style="{width:'90%',margin:'auto',textAlign:'right'}">共{{cnt1}}条</p>
       
         </div>
       
         <div class="mcs" v-show="flats">
             <img src="../assets/sc.png" @click="scs">
             <h2 :style="{textAlign:'left',width: '80%',margin:'10px auto 0' }">详情:</h2>
            <div class="mcs_nr" >{{work1.ThingName}}:{{work1.ThingSum}}</div>
            <div class="mcs_nr" >申请人:{{work1.UserName}}</div>
             <div class="mcs_nr" >申请理由:{{work1.SQreason}}</div>
             <div class="mcs_nr" >状态:{{work1.OFStatus}}</div>
              <div class="mcs_nr" >审批人:{{work1.Checker}}</div>
              <div class="mcs_nr" >审批理由:{{work1.OAreason}}</div>
          </div>
         <!-- 申请办公用品 -->
        <div class="workthingTwo" v-show="sin==2" >
              <div class="workthingTwo_left">
                      <p>新建办公用品单</p>
                      <div class="workthingTwo_left_left">
                      <el-form ref="form"  label-width="80px" size="mini">
                          <el-form-item label="用品名称">
                            <el-input placeholder="请输入"  v-model="inputs1"></el-input>
                          </el-form-item>
                          

                          <el-form-item label="用品数量">
                            <el-input placeholder="请输入" v-model="inputs2"></el-input>
                          </el-form-item>
                          
                          <el-form-item label="申请理由">
                            <el-input type="textarea"  :rows="2"  placeholder="请输入内容" v-model="textareas1"></el-input>
                           </el-form-item>
                        <el-form-item size="large">
                            <el-button type="primary" @click="onSubmits1">立即创建</el-button>
                         </el-form-item>
                    </el-form>
                    </div>
              </div>
              <div class="workthingTwo_right">
                     <div class="workthingTwo_right_One">
                            <div class="block" >
                            <div class="radio">
                                <el-radio-group v-model="reverse">
                                 <el-radio :label="true">倒序</el-radio>
                                <el-radio :label="false">正序</el-radio>
                               </el-radio-group>
                            </div>
                            <div class="workthingTwo_right_OneA" >
                              <el-timeline :reverse="reverse">
                                      <el-timeline-item :style="{fontSize:'12px'}"
                                        v-for="(activity, index) in work"
                                         :key="index"
                                         :timestamp="activity.Cltime">
                                         <h3>创建成功</h3>{{activity.UserName}}  {{activity.ThingName}}  {{activity.ThingSum}}  {{activity.SQreason}}
                                      </el-timeline-item>
                            </el-timeline>
                           </div>
                          </div>
                      </div>
              </div>
        </div>
    </div>  
  </div>
</template>

<script>
export default {
    data() {
      return {
         value:'',//审核状态的双向绑定数据
        //筛选的数据
          options: [{value: '同意',label: '同意' },
                           {value: '驳回', label: '驳回'},
                          {value: '未审批',label: '未审批'}, ],
        inputs1:'',//用品名称的数据双向绑定
        inputs2:'',//用品数量的数据双向绑定
        textareas1:'',//申请理由的数据双向绑定
        sin:1,
        reverse: true,
        flats:false,//查看的蒙层
         login:{},//存放登录信息
          work:[],//放办公申请的数据
          work1:{}//点击查看的数据

      }
    },
    methods: {
      keys1(val){
         this.flats=true
         this.work1=val
      },
      sing(num){
            this.sin=num
      },
       scs(){
          this.flats=false
         },
         //筛选查询
         scre(){
          // console.log(this.value);
              // 拿办公用品数据
                this.$axios({
                    url:'http://localhost:9090/selectOffice',
                    method:"post",//post请求方式
                    data:{carobj:{
                       UserName:'',
                       ThingName:'',
                       OFStatus:this.value
                    }}
                }).then(res=>{
                     //筛选登录人的审核信息的数据
                      this.work=(res.data.data).filter(item=>{
                           return this.login.UserGH==item.UserGH
                    })
                    
                })
         },
         //创建申请用品的接口
         onSubmits1(){
          // console.log(this.login.UserGH);
          if(this.inputs1!=''&&this.inputs2!=''&&this.textareas1!=''){
            this.$axios({
            url:'http://localhost:9090/insertworkthing',
            method:"post",
            data:{carobj:{
                 UserGH:this.login.UserGH,
                ThingName:this.inputs1,
                OFStatus:'未审批',
                ThingSum:this.inputs2,
                SQreason:this.textareas1,
                OAreason:'无',
                Checker:'无'
            }}
           }).then(res=>{
             this.inputs1='',
             this.inputs2='',
             this.textareas1=''
           })
           this.works()
          }
           
         },
          //获取数据的接口
           works(){
                   // 拿办公用品数据
                this.$axios({
                    url:'http://localhost:9090/selectOffice',
                    method:"post",//post请求方式
                    data:{carobj:{
                        UserName:'',
                       ThingName:'',
                       OFStatus:''
                    }}
                }).then(res=>{
                   
                    //筛选登录人的审核信息的数据
                      this.work=(res.data.data).filter(item=>{
                           return this.login.UserGH==item.UserGH
                    })
                      console.log(this.work);
                    
                })
           }
       },
     // 计算属性
        computed:{
          cnt1(){
            return this.work.length
          }
       },
    //生命周期
    mounted() {
      this.login=this.$store.state.logininfo
      this.works()
    },
}
</script>

<style>
    .workthing{
    width: 100%;
    height: 540px;
    background: #fff;
   }
   /* 头部 */
   .workthing_hend{
    width: 100%;
    height: 10%;
    line-height: 55px;
    text-align: left;
   }
   .workthing_hend_bnt{
    margin: 0 20px 0 10px;
   }
   /* 内容 */
   .workthing_nva{
    width:98%;
    height: 90%;
    padding: 0 0 0 10px;
   }
   .workthingOne{
    width: 100%;
   }
   .workthingTwo{
    width: 100%;
   }
   .workthing_bnt{
    width: 40%;
    text-align: left;
    list-style: none;
    overflow: hidden;
    margin: 10px 0 20px 0;
    /* border: 1px solid #f00; */
   }
   .workthing_bnt>li{
    width: 40%;
    margin: 0 20px 0 0;
    float: left;
   }
   .mcs{
    width: 40%;
    height: 300px;
    background: rgba(245, 245, 245, 0.9);
    border-radius: 10px;
    position: absolute;
    top:150px;
    left:580px;
    
   }
   .mcs>img{
    width: 20px;
    position: absolute;
    top: 0px;
    left: 620px;
   }
   .mcs_nr{
     background-image:-webkit-linear-gradient(left,red,#fd8403,#c2eb3b,#00ff00,#84fb03,#0000ff); 
    -webkit-background-clip:text; 
    -webkit-text-fill-color:transparent; 
    text-align: left;
    width: 50%;
   margin: 10px auto 0;
    /* border: 1px solid #f00; */
    
   }
   /* 新建申请用品 */
     .workthingTwo{
        width: 100%;
        height: 100%;
        overflow: hidden;
     }
     /* 左边 */
     .workthingTwo_left{
        width: 60%;
        height: 100%;
        float: left;
        /* background: #f00; */
     }
     .workthingTwo_left>p{
        height:28px;
        line-height: 28px;
        margin: 20px 0 0 0 ;
      }
       .workthingTwo_left_left{
         width: 60%;
         height: 100%;
         margin:60px auto 0;
         /* border: 1px solid #f00; */
      }
      .cj{
        width: 100%;
      }
      .cj>button{
        width: 15%;
         height: 40px;
         margin: 20px 0 0 0;
        border-radius: 15px;
        background: rgb(253, 246, 236);
         border:none;
        outline: none; 
      }
      .cj>button:hover{
        background: rgb(230, 162, 60);
      }
     /* 右边 */
     .workthingTwo_right{
         width: 39%;
        overflow-x: hidden;
        overflow-y: scroll;
        /* background: #f00; */
        text-align: left;
        float: left;
     }
     .radio{
        margin: 20px 0 20px 0;
     }
     .workthingTwo_right_OneA{
         width: 100%;
        height: 300px;
        padding: 10px 0 0 10px;
        overflow-x: hidden;
        overflow-y: scroll;
        border-radius: 10px;
        background: rgb(245, 245, 243);
     }
      .workthingTwo_right::-webkit-scrollbar {
        display: none;
    }
</style>